<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			http-equiv="X-UA-Compatible"
			content="IE=edge"
		/>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>博客详情页</title>

		<link
			rel="stylesheet"
			href="css/common.css"
		/>
		<link
			rel="stylesheet"
			href="css/detail.css"
		/>
	</head>

	<body>
		<div class="nav">
			<img
				src="pic/logo2.jpg"
				alt=""
			/>
			<span class="blog-title">我的博客系统</span>
			<div class="space"></div>
			<a
				class="nav-span"
				href="blog_list.html"
				>主页</a
			>
			<a
				class="nav-span"
				href="blog_edit.html"
				>写博客</a
			>
			<a
				class="nav-span"
				href="#"
				onclick="logout()"
				>注销</a
			>
		</div>

		<div class="container">
			<div class="left">
				<div class="card">
					<img
						src="pic/doge.jpg"
						alt=""
					/>
					<h3></h3>
					<a href="#">GitHub 地址</a>
					<div class="row">
						<span>文章</span>
						<span>分类</span>
					</div>
					<div class="row">
						<span>2</span>
						<span>1</span>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="content">
					<div class="title"></div>
					<div class="date"></div>
					<div
						class="detail"
						id="detail"
						style="background-color: transparent; border: none !important"
					></div>
					<div class="operating"></div>
				</div>
			</div>
		</div>

		<!-- 引入 editor.md 的依赖 -->
		<link
			rel="stylesheet"
			href="blog-editormd/css/editormd.css"
		/>
		<script src="js/jquery.min.js"></script>
		<script src="blog-editormd/lib/marked.min.js"></script>
		<script src="blog-editormd/lib/prettify.min.js"></script>
		<script src="blog-editormd/editormd.js"></script>
		<script src="js/common.js"></script>
		<script src="constants/response.js"></script>
		<script>
			let url = `/user/getAuthorByBlogId${location.search}`
			getUserInfo(url)

			// 获取文章详情
			$.ajax({
				url: '/blog/getBlogDetail' + location.search,
				type: 'get',
				success(result) {
					if (result && result.code === RESPONSE_CODE_STATUS.success && result.data) {
						const { data } = result
						$('.content .title').html(data.title)
						$('.content .date').html(data.updateTime)
						// $('.content .detail').html(data.content)
						if (data.isLoginUser || data.loginUser) {
							// 是本人的文章
							$('.content .operating').html(`
              <button onclick="window.location.href='blog_update.html?blogId=${data.id}'">编辑</button>
              <button onclick="deleteBlog(${data.id})">删除</button>`)
						}

						// markdown To HTML
						editormd.markdownToHTML('detail', {
							markdown: data.content,
						})
					} else {
						// ...
					}
				},
				error(result) {
					location.assign('./blog_login.html')
				},
			})
			//显示博客作者信息
			var userUrl = '/user/getAuthorInfo' + location.search
			// getUserInfo(userUrl)

			function deleteBlog() {
				if (!confirm('确认删除吗')) return
				$.ajax({
					url: '/blog/delete'+location.search,
					type: 'post',
					success(result) {
						if (result && result.code === RESPONSE_CODE_STATUS.success && result.data) {
              alert('删除成功')
              location.href = './blog_list.html'
						} else {
							// ...
						}
					},
					error(result) {
            if (result.status === 401) {
              location.assign('./blog_login.html')
            }
					},
				})
			}
		</script>
	</body>
</html>
